<template>
  <div class="container">
    <header>
      <h1>全部产品</h1>
      <div class="header-icons">
        <button class="more-icon">...</button>
        <button class="setting-icon">⚙️</button>
      </div>
    </header>
    <div class="search-bar">
      <input type="text" placeholder="搜索">
    </div>
    <nav>
      <ul class="category-tabs">
        <li class="tab">精品花器</li>
        <li class="tab">永生花</li>
        <li class="tab active">鲜花礼盒</li>
        <li class="tab">家居摆设</li>
      </ul>
    </nav>
    <main>
      <div class="product-item" v-for="(product, index) in products" :key="index">
        <img :src="product.image" :alt="product.name">
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p>{{ product.description }}</p>
          <div class="product-tags">
            <span class="tag" v-for="tag in product.tags" :key="tag">{{ tag }}</span>
          </div>
          <p class="product-stock">{{ product.sold }}件 | 仅剩{{ product.stock }}件</p>
          <p class="product-price">{{ product.price }}</p>
        </div>
        <button class="add-to-cart" @click="addToCart(product)">🛒</button>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          name: '经典花盒后知后觉的美丽',
          description: '鲜花礼盒 | 白色半透明塑料纸',
          image: 'flower1.jpg',
          tags: ['推荐', '最新', '热卖'],
          sold: 99,
          stock: 100,
          price: '¥100'
        },
        {
          name: '经典花盒绿草苍苍白雾茫茫',
          description: '鲜花礼盒 | 白色半透明塑料纸',
          image: 'flower2.jpg',
          tags: ['推荐', '最新', '热卖'],
          sold: 99,
          stock: 100,
          price: '¥100'
        }
      ]
    };
  },
  methods: {
    addToCart(product) {
      // 这里可以添加实际的添加到购物车逻辑，目前只是简单提示
      alert(`已将 ${product.name} 添加到购物车`);
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

/* 头部样式 */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-icons button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #777;
    transition: color 0.3s ease;
}

.header-icons button:hover {
    color: #333;
}

/* 搜索栏样式 */
.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* 导航栏样式 */
nav {
    margin-bottom: 20px;
}

.category-tabs {
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-tabs li {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.category-tabs li.active {
    background-color: #ff6b6b;
    color: white;
}

.category-tabs li:hover {
    background-color: #f0f0f0;
}

/* 产品项样式 */
.product-item {
    display: flex;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

.product-item img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.product-info {
    padding: 15px;
    flex: 1;
}

.product-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.product-tags {
    margin-bottom: 5px;
}

.tag {
    background-color: #ff6b6b;
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 5px;
}

.product-stock {
    color: #777;
    font-size: 14px;
    margin-bottom: 5px;
}

.product-price {
    font-size: 20px;
    font-weight: bold;
    color: #ff6b6b;
}

.add-to-cart {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    margin: 15px;
    transition: background-color 0.3s ease;
}

.add-to-cart:hover {
    background-color: #45a049;
}
</style>    